<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css" media="screen">
		 * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .wrap {
            width: 330px;
            height: 30px;
            margin: 100px auto 0;
            padding-left: 10px;
            background-image: url(images/bg.jpg);
        }

        .wrap li{
            background-image: url(images/libg.jpg);
        }

        .wrap > ul > li {
            float: left;
            margin-right: 10px;
            position: relative;
        }

        .wrap a {
            display: block;
            height: 30px;
            width: 100px;
            text-decoration: none;
            color: #000;
            line-height: 30px;
            text-align: center;
        }

        .wrap li ul {
            position: absolute;
            top: 30px;
            display: none;
        }
	</style>
	<script type="text/javascript" src="jquery-3.4.1.js"></script>
	<script type="text/javascript">
		$(function () {
          $(".wrap>ul>li").mouseover(function () {
              $(this).children("ul").stop().show(500);
          });
            $(".wrap>ul>li").mouseout(function () {
                $(this).children("ul").stop().hide(500);
            });
        });
	</script>
</head>
<body>
	<div class="wrap">
	    <ul>
	        <li>
	            <a href="javascript:void(0);">帅哥系列</a>
	            <ul>
	                <li><a href="javascript:void(0);">乔峰</a></li>
	                <li><a href="javascript:void(0);">张无忌</a></li>
	                <li><a href="javascript:void(0);">郭靖</a></li>
	            </ul>
	        </li>
	        <li>
	            <a href="javascript:void(0);">美女系列</a>
	            <ul>
	                <li><a href="javascript:void(0);">柳 岩</a></li>
	                <li><a href="javascript:void(0);">杨 幂</a></li>
	                <li><a href="javascript:void(0);">萝 拉</a></li>
	            </ul>
	        </li>
	        <li>
	            <a href="javascript:void(0);">渣男妇腐女</a>
	            <ul>
	                <li><a href="javascript:void(0);">凤姐</a></li>
	                <li><a href="javascript:void(0);">助教</a></li>
	                <li><a href="javascript:void(0);">导师</a></li>
	            </ul>
	        </li>
	    </ul>
	</div>
</body>
</html>